<template>
  <Select style="width: 100%"
          :value="value_"
          :placeholder="placeholder"
          :allowClear="allowClear"
          :showSearch="showSearch"
          :showArrow="showArrow"
          :size="size"
          :mode="mode"
          :notFoundContent="notFoundContent"
          :labelInValue="labelInValue"
          :filterOption="filterOption"
          :disabled="disabled"
          @change="change"
          @blur="blur"
          @deselect="deselect"
          @focus="focus"
          @inputKeydown="inputKeydown"
          @dropdownVisibleChange="dropdownVisibleChange"
          @search="search"
          @popupScroll="popupScroll"
          @mouseenter="mouseenter"
          @mouseleave="mouseleave"
          @select="select">
    <Option v-for="(option) in options"
            :key="option.id">{{ option.name }}</Option>
  </Select>
</template>

<script>
import { Select } from 'ant-design-vue'
import PropTypes from '@zh/common-utils/prop-types'
import { getRoleList } from './../api/select'
export default {
  name: 'ZSelectRole',
  components: { Select, Option: Select.Option },
  props: {
    value: {
      type: [String, Array],
      default: () => []
    },
    // testProp: PropTypes.string.require().des('测试属性'),
    placeholder: PropTypes.string.def('请选择角色').des('默认提示'),
    mode: PropTypes.string.def('multiple').des('设置 Select 的模式为多选或标签 multiple'),
    allowClear: PropTypes.bool.def(false).des('是否可清空下拉框'),
    disabled: PropTypes.bool.def(false).des('是否禁用'),
    showSearch: PropTypes.bool.def(false).des('是否可搜索'),
    showArrow: PropTypes.bool.def(true).des('是否显示小箭头'),
    labelInValue: PropTypes.bool.def(false).des('是否把每个选项的 label 包装到 value 中'),
    size: PropTypes.string.def('default').des('下拉框大小，默认为default large small'),
    notFoundContent: PropTypes.string.def('暂无数据').des('当下拉列表为空时显示的内容')
  },
  data () {
    return {
      options: [],
      value_: null
    }
  },
  watch: {
    value: {
      handler (value) {
        this.value_ = value || []
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
  },
  created () {
    this.getRoleListOption().then(() => {
      this.value_ && this.$emit('change', this.value_, this.getObject(this.value_) || [])
    })
  },
  methods: {
    getRoleListOption () {
      return new Promise((resolve, reject) => {
        getRoleList().then(res => {
          this.options = res
          resolve()
        })
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    getObject (value) {
      if (typeof value == 'string') {
        return this.options.filter(item => {
          return value == item.id
        })
      } else if (value instanceof Array) {
        return this.options.filter(item => {
          return value.includes(item.id)
        })
      }
    },
    /** value变化时调用 */
    change (val, option) {
      this.value_ = val
      this.$emit('input', val)
      this.$emit('change', val, this.getObject(val) || [])
    },
    /** 选中时调用 */
    select (val) {
      this.$emit('select', val, this.getObject(val) || [])
    },
    /** 失去焦点的时回调 */
    blur (val) {
      this.$emit('blur', val)
    },
    /** 取消选中时调用 */
    deselect (val) {
      this.$emit('deselect', val)
    },
    /** 获得焦点时回调 */
    focus () {
      this.$emit('focus')
    },
    /** 键盘按下时回调 */
    inputKeydown (event) {
      this.$emit('inputKeydown', event)
    },
    /** 展开下拉菜单的回调 */
    dropdownVisibleChange (isopen, a) {
      this.$emit('dropdownVisibleChange', isopen)
    },
    /** 文本框值变化时回调 */
    search (val) {
      this.$emit('search', val)
    },
    /** 下拉列表滚动时的回调	 */
    popupScroll (event) {
      this.$emit('popupScroll', event)
    },
    /** 鼠标移入时回调 */
    mouseenter (event) {
      this.$emit('mouseenter', event)
    },
    /** 鼠标移出时回调 */
    mouseleave (event) {
      this.$emit('mouseleave', event)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
